<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>儿童兴趣班-个人中心</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/front/PersonalInformation.css">
    <link rel="stylesheet" href="../css/front/background.css">
</head>

<body>
    <!-- 背景动画 -->
	<ul class="square">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul class="circle">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
    
    <div class="main-content">
        <!-- 导航栏模块 -->
        <ul class="layui-nav layui-fixed">
            <li class="layui-nav-item"><a href="index.html">首页</a></li>
            <li class="layui-nav-item"><a href="combo.html">套餐中心</a></li>
            <li class="layui-nav-item"><a href="AboutUs.html">关于我们</a></li>
        </ul>

        <!-- 个人中心内容 -->
        <div class="personal-content">
            <!-- 顶部导航栏 -->
            <div class="top-info-bar">
                <div class="notification-box">
                    <i class="layui-icon layui-icon-notice"></i>
                    <span class="badge">3</span>
                    <span>消息通知</span>
                </div>
                <div class="user-actions">
                    <button class="layui-btn" id="editProfile">
                        <i class="layui-icon layui-icon-edit"></i>修改资料
                    </button>
                    <button class="layui-btn layui-btn-danger" id="logout">
                        <i class="layui-icon layui-icon-logout"></i> 退出登录
                    </button>
                </div>
            </div>
            <!-- 个人信息卡片 -->
            <div class="profile-section">
                <div class="profile-card">
                    <div class="avatar-section">
                        <div class="avatar-wrapper">
                            <img src="../img/front/headshot.jpg" class="avatar" id="avatarImg">
                            <div class="avatar-overlay">
                                <i class="layui-icon layui-icon-camera"></i>
                            </div>
                        </div>
                    </div>
                    <div class="basic-info">
                        <h2>鬼鬼 <span class="gender-tag">女士</span></h2>
                        <p><i class="layui-icon layui-icon-cellphone"></i> 17380310067</p>
                        <p><img src="../img/front/vip.svg" class="vip-icon"><span class="vip-info">8</span></p>
                        <p class="expense-info">
                            <i class="layui-icon layui-icon-rmb"></i>
                            <span>消费总额：</span>
                            <span class="amount">¥66,666</span>
                        </p>
                    </div>
                </div>
            </div>

            <!-- 孩子信息卡片 -->
            <div class="children-section">
    <div class="section-title">
        孩子信息
        <div class="child-switcher">
            <div class="layui-form">
                <div class="layui-form-item" style="margin-bottom: 0;">
                    <select lay-filter="childSelect" name="childSelect">
                        <option value="1">小明</option>
                        <option value="2">小红</option>
                        <option value="3">小华</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="child-cards">
        <!-- 第一个孩子的卡片 -->
        <div class="child-card active" data-child="1">
            <div class="child-basic-info">
                <h3>小明 <span class="gender">男</span></h3>
                <p>年龄：8岁</p>
            </div>
            
            <div class="course-progress">
                <div class="progress-item">
                    <div class="progress-title">
                        <span>钢琴课程套餐</span>
                        <span class="status in-progress">使用中</span>
                    </div>
                    <div class="layui-progress" lay-showPercent="true">
                        <div class="layui-progress-bar" lay-percent="60%"></div>
                    </div>
                </div>
                
                <div class="progress-item">
                    <div class="progress-title">
                        <span>美术课程套餐</span>
                        <span class="status in-progress">使用中</span>
                    </div>
                    <div class="layui-progress" lay-showPercent="true">
                        <div class="layui-progress-bar" lay-percent="40%"></div>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-title">
                        <span>书法课程套餐</span>
                        <span class="status completed">已完成</span>
                    </div>
                    <button class="layui-btn layui-btn-sm layui-btn-normal">续费</button>
                </div>
            </div>

            <div class="weekly-schedule">
                <h4>本周课程安排</h4>
                <button class="layui-btn layui-btn-sm layui-btn-normal add-schedule-btn">
                    <i class="layui-icon layui-icon-add-1"></i> 申请课程
                </button>
                <div class="schedule-list">
                    <div class="schedule-item">
                        <span class="day">周一</span>
                        <span class="course">16:00-17:30</span>
                        <span class="course">钢琴课</span>
                        <span class="course">A区教室</span>
                        <span class="coach">徐老师</span>
                    </div>
                    <div class="schedule-item">
                        <span class="day">周三</span>
                        <span class="course">16:00-17:30</span>
                        <span class="course">美术课</span>
                        <span class="course">B区教室</span>
                        <span class="coach">徐老师</span>
                    </div>
                    <div class="schedule-item">
                        <span class="day">周五</span>
                        <span class="course">16:00-17:30</span>
                        <span class="course">书法课</span>
                        <span class="course">C区教室</span>
                        <span class="coach">徐老师</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第二个孩子的卡片 -->
        <div class="child-card" data-child="2">
            <div class="child-basic-info">
                <h3>小红 <span class="gender">女</span></h3>
                <p>年龄：6岁</p>
            </div>
            
            <div class="course-progress">
                <div class="progress-item">
                    <div class="progress-title">
                        <span>舞蹈课程套餐</span>
                        <span class="status in-progress">使用中</span>
                    </div>
                    <div class="layui-progress" lay-showPercent="true">
                        <div class="layui-progress-bar" lay-percent="50%"></div>
                    </div>
                 </div>
                
                <div class="progress-item">
                    <div class="progress-title">
                        <span>声乐课程套餐</span>
                        <span class="status unused">未使用</span>
                    </div>
                    <button class="layui-btn layui-btn-sm layui-btn-normal">使用</button>
                </div>

                <div class="progress-item">
                    <div class="progress-title">
                        <span>绘画课程套餐</span>
                        <span class="status completed">已完成</span>
                    </div>
                    <button class="layui-btn layui-btn-sm layui-btn-normal">续费</button>
                </div>
            </div>

            <div class="weekly-schedule">
                <h4>本周课程安排</h4>
                <button class="layui-btn layui-btn-sm layui-btn-normal add-schedule-btn">
                    <i class="layui-icon layui-icon-add-1"></i> 添加课程
                </button>
                <div class="schedule-list">
                    <div class="schedule-item">
                        <span class="day">周二</span>
                        <span class="course">16:00-17:30</span>
                        <span class="course">舞蹈课</span>
                        <span class="course">D区教室</span>
                        <span class="coach">徐老师</span>
                    </div>
                    <div class="schedule-item">
                        <span class="day">周四</span>
                        <span class="course">16:00-17:30</span>
                        <span class="course">声乐课</span>
                        <span class="course">E区教室</span>
                        <span class="coach">徐老师</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第三个孩子的卡片 -->
        <div class="child-card" data-child="3">
            <div class="child-basic-info">
                <h3>小华 <span class="gender">男</span></h3>
                <p>年龄：10岁</p>
            </div>
            
            <div class="course-progress">
                <div class="progress-item">
                    <div class="progress-title">
                        <span>英语课程套餐</span>
                        <span class="status in-progress">使用中</span>
                    </div>
                    <div class="layui-progress" lay-showPercent="true">
                        <div class="layui-progress-bar" lay-percent="85%"></div>
                    </div>
                </div>
                
                <div class="progress-item">
                    <div class="progress-title">
                        <span>数学课程套餐</span>
                        <span class="status in-progress">使用中</span>
                    </div>
                    <div class="layui-progress" lay-showPercent="true">
                        <div class="layui-progress-bar" lay-percent="45%"></div>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-title">
                        <span>围棋课程套餐</span>
                        <span class="status completed">已完成</span>
                    </div>
                    <button class="layui-btn layui-btn-sm layui-btn-normal">续费</button>
                </div>
            </div>

            <div class="weekly-schedule">
                <h4>本周课程安排</h4>
                <button class="layui-btn layui-btn-sm layui-btn-normal add-schedule-btn">
                    <i class="layui-icon layui-icon-add-1"></i> 添加课程
                </button>
                <div class="schedule-list">
                    <div class="schedule-item">
                        <span class="day">周一</span>
                        <span class="course">16:00-17:30</span>
                        <span class="course">英语课</span>
                        <span class="course">F区教室</span>
                        <span class="coach">徐老师</span>
                    </div>
                    <div class="schedule-item">
                        <span class="day">周三</span>
                        <span class="course">16:00-17:30</span>
                        <span class="course">数学课</span>
                        <span class="course">G区教室</span>
                        <span class="coach">徐老师</span>
                    </div>
                    <div class="schedule-item">
                        <span class="day">周五</span>
                        <span class="course">16:00-17:30</span>
                        <span class="course">围棋课</span>
                        <span class="course">H区教室</span>
                        <span class="coach">徐老师</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
        </div>
    </div>
    <!-- 页脚模块 -->
    <div class="footer layui-fluid">
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <p>© 2024 徐文斌 版权所有</p>
                    <p>联系电话:173-6960-0067 | 地址:珠海市斗门区文斌街道</p>
                </div>
            </div>
        </div>
    </div>

    <script src="../layui/layui.js"></script>
    <script src="../js/front/PersonalInformation.js"></script>
</body>
</html>